import React, { ReactElement, useState, useEffect } from 'react'
import { CartProductType } from '@/models/types'
import { Card, Button } from 'antd-mobile'
import styles from './index.less'
import PayModel from '@/components/PayModel'
interface Props {
    /**checked */
    data: CartProductType[]
}

export default function PayBar({ data }: Props): ReactElement {
    const [total, settotal] = useState(0)
    const [totalPrice, settotalPrice] = useState(0)
    const [show, setshow] = useState(false)
    useEffect(() => {
        if (data.length) {
            const sum = data.map(item => item.count).reduce((a, b) => a + b)
            settotal(sum)
            const priceSum = data.map(item => item.count * (+item.price)).reduce((a, b) => a + b)
            settotalPrice(priceSum)
        }
    }, [])
    const showHandle = () => {
        setshow(!show)
    }
    /**
     * Card
     *  共几件
     *  合计多少钱
     * Button
     *  去支付
     */
    return (
        <div className={styles.main}>
            <Card full className={styles.payBar}>
                <span>共 {total} 件</span>
                <span> 合计 {totalPrice.toFixed(2)}</span>
                <Button onClick={() => { setshow(!show) }}>去支付</Button>
            </Card>
            <PayModel onShow={show} showHandle={showHandle}></PayModel>
        </div>
    )
}
